<script setup>
import { ref } from 'vue'
import {
  getPrePublishCourseService,
  getAuditHistoryService,
  auditCourseService
} from '@/api/course.js'
import CourseInfo from './components/CourseInfo.vue'
import AuditMind from './components/AuditMind.vue'
const prePublishCourseList = ref([
  {
    id: '',
    publishStatus: '',
    auditStatus: '',
    auditMind: '',
    uploaderId: '',
    title: '',
    description: '',
    createDate: '',
    updateDate: ''
  }
])
const historyList = ref([])
const prePublishLoading = ref(true)
const historyLoading = ref(true)

const getPrePublishCourseList = async () => {
  const res = await getPrePublishCourseService()
  res.data.forEach((item) => {
    const auditStatusI = item.auditStatus
    item.auditStatus = auditStatusI === '101' ? '通过' : auditStatusI === '102' ? '驳回' : '待审核'
  })
  prePublishCourseList.value = res.data
  prePublishLoading.value = false
}
const getHistoryList = async () => {
  const res = await getAuditHistoryService()
  historyList.value = res.data
  historyLoading.value = false
}
const onPass = async (id) => {
  await auditCourseService({ id, status: 101 })
  ElMessage({ type: 'success', message: '审核成功' })
  getPrePublishCourseList()
}
const auditMindRef = ref()
const onReject = async (id) => {
  auditMindRef.value.open(id, 102)
}
const courseInfoRef = ref()

const getInfo = async (id) => {
  courseInfoRef.value.open(id)
}
getPrePublishCourseList()
getHistoryList()

const onSuccess = () => {
  //成功回调
  getPrePublishCourseList()
}
</script>

<template>
  <page-container title="科普视频">
    <el-table
      :data="prePublishCourseList"
      style="width: 100%"
      v-loading="prePublishLoading"
      height="480px"
    >
      <el-table-column prop="createDate" label="提交日期" width="150" />
      <el-table-column align="center" label="未审核科普视频">
        <el-table-column prop="title" label="科普视频名称" width="120" />
        <el-table-column prop="auditStatus" label="审核状态" width="120" />
        <el-table-column prop="description" align="center" label="科普视频描述">
          <template #default="{ row }">
            <div class="description-cell">{{ row.description }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核" width="210">
          <template #default="{ row }">
            <div class="button-wrapper">
              <el-button size="medium" type="primary" @click="getInfo(row.id)">详情</el-button>
              <el-button size="medium" type="success" @click="onPass(row.id)">通过</el-button>
              <el-button size="medium" type="danger" @click="onReject(row.id)">驳回</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </page-container>
  <audit-mind ref="auditMindRef" @success="onSuccess"></audit-mind>
  <course-info ref="courseInfoRef"></course-info>
</template>

<style scoped>
.description-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
